<template>
	<view class="detail">
		<view class="title">{{detailData.title}}</view>
		<view class="info">
			<view class="author">{{detailData.author}}</view>
			<view class="time">{{detailData.posttime}}</view>
		</view>
		<view class="content">
			<!-- 富文本类型，2种方式 -->
			<!-- <rich-text :nodes="detailData.content"></rich-text> -->
			<view v-html="detailData.content"></view>
		</view>
		<view class="description">声明：本站的内容均采集于腾讯新闻</view>
	</view>
</template>

<script>
import {parseTime} from "@/tools/tool.js"
	export default {
		data() {
			return {
				options:null,
				detailData: {},
			};
		},
		methods:{
			getDetail(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/detail.php",
					data:this.options,
					success:res=>{
						res.data.posttime = parseTime(res.data.posttime);
						// 匹配所有的<img,添加样式，兼容性最好
						res.data.content = res.data.content.replace(/<img/gi,'<img style="max-width:100%"')
						this.detailData = res.data;
						this.saveHistory();
						uni.setNavigationBarTitle({
							title:this.detailData.title
						})
					}
				})
			},
			saveHistory(){
				let item = {
					id:this.detailData.id,
					classid:this.detailData.classid,
					picurl:this.detailData.picurl,
					title:this.detailData.title,
					lookTime:parseTime(Date.now())
				}
				let historyArr = uni.getStorageSync('historyArr') || []
				
				// 方法1
				// let index = historyArr.findIndex(value => {
				// 	return value.id == this.detailData.id;
				// })
				// if(index >= 0){
				// 	historyArr.splice(index,1)
				// }
				
				// 方法2
				historyArr = historyArr.filter(item => {
					return item.id != this.detailData.id;
				})
				historyArr.unshift(item);
				
				// 只存最近浏览的10条
				historyArr = historyArr.slice(0,10);
				uni.setStorageSync('historyArr',historyArr);
			}
		},
		onLoad(e){
			this.options = e;
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
.detail{
	padding: 30rpx;
	.title{
		font-size: 46rpx;
		color:#333;
	}
	.info{
		background-color: #F6F6F6;
		padding:20rpx 10rpx;
		font-size: 25rpx;
		color:#666;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}
	.content{
		margin-bottom: 50rpx;
		// h5可以，小程序不行
		// /deep/ img{
		// 	max-width: 100%;
		// }
	}
	.description{
		background-color: #FEF0F0;
		font-size: 26rpx;
		padding: 20rpx;
		color:#F89898;
		line-height: 1.8rem;
	}
}
</style>
